let Main = {
    data() {
        let validNum = (rules,value,callback)=>{
            if(value!=null && value!=''){
                if(isNaN(value)){
                    callback(new Error('请填写数字'));
                }else{
                    callback();
                }
            }else{
                callback();
            }
        };

        let validRePass = (rules,value,callback)=>{
            if(value==null || value==''){
                callback(new Error('确认密码不能为空'));
            }else{
                if(this.mngPassForm.password!=value){
                    callback(new Error('两次密码不一致'));
                }else{
                    callback();
                }
            }
        };
        return {
            table: {
                name: '',
                time: [],
                regionNo: [],
                usable: null,
                mng: null,
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                rowCount: 0,
                loading: false
            },
            comForm: {
                isCreate: true,
                title: '',
                dialog: false,
                id: '',
                name: '',
                regionNo: [],
                address: '',
                houseNum: '',
                buildAreaNum: '',
                exclusiveArea: '',
                submitDisabled: false,
                rules: {
                    name: [
                        { required: true, message: '请输入小区名称', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '请输入详细地址', trigger: 'blur' }
                    ],
                    regionNo: [
                        { required: true, message: '请选择地区', trigger: 'change' }
                    ],
                    houseNum: [
                        {validator: validNum, trigger: 'blur', message: '总住户数必须是数字'}
                    ],
                    buildAreaNum: [
                        {validator: validNum, message: '总建筑面积必须是数字', trigger: 'blur'}
                    ],
                    exclusiveArea: [
                        {validator: validNum, message: '专有部分面积必须是数字', trigger: 'blur'}
                    ]
                },
                regionList: [],
                regionListProps: {
                    value: 'no',
                    label: 'name',
                    children: 'children'
                }

            },
            regionList: [],
            regionListProps: {
                value: 'no',
                label: 'name',
                children: 'children'
            },
            usableList: [
                { label: "可用", value: 1 },
                { label: "不可用", value: 0 }
            ],
            mngList: [
                { label: "有管理员", value: 1 },
                { label: "无管理员", value: 0 }
            ],
            mngTable: {
                communityId: '',
                title: '',
                dialog: false,
                tableData: [],
                currentPage: 1,
                pageSize: 10,
                rowCount: 0,
                loading: false
            },
            mngPassForm: {
                dialog: false,
                password: '',
                rePass: '',
                mngId: '',
                submitDisabled: false,
                rules: {
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min:4, max:12, message: '密码长度为4-12位'}
                    ],
                    rePass: [
                        { required: true, message: '请输入确认密码', trigger: 'blur' },
                        {validator: validRePass, trigger: 'blur'}
                    ]
                }
            },
            mngForm: {
                isCreate: true,
                title: '',
                dialog: false,
                communityId: '',
                mngId: '',
                phoneNum: '',
                realName: '',
                password: '',
                submitDisabled: false,
                rules: {
                    phoneNum: [
                        { required: true, message: '请输入手机号', trigger: 'blur' }
                    ],
                    realName: [
                        { required: true, message: '请输入真实姓名', trigger: 'blur' },
                        { min: 2, max: 5, message: '姓名长度为2-5个字符', trigger: 'blur' }
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 4, max: 12, message: '密码为4-12个字符', trigger: 'blur' }
                    ]
                }
            }
        }
    },
    methods: {

        addMng(){
            if(this.$refs['mngForm']){
                this.$refs['mngForm'].resetFields();
            }
            this.mngForm.isCreate = true;
            this.mngForm.title = '新增管理员';
            this.mngForm.communityId = this.mngTable.communityId;
            this.mngForm.mngId = '';
            this.mngForm.phoneNum = '';
            this.mngForm.realName = '';
            this.mngForm.password = '';
            this.mngForm.dialog = true;
        },

        modifyMng(row){
            if(this.$refs['mngForm']){
                this.$refs['mngForm'].resetFields();
            }
            this.mngForm.isCreate = false;
            this.mngForm.title = '修改管理员';
            this.mngForm.communityId = this.mngTable.communityId;
            this.mngForm.mngId = row.mngId;
            this.mngForm.phoneNum = row.phoneNum;
            this.mngForm.realName = row.realName;
            this.mngForm.dialog = true;
        },

        submitMng(){
            this.$refs['mngForm'].validate(valid=>{
                if(!valid){
                    return;
                }
                this.mngForm.submitDisabled = true;
                let params = new URLSearchParams();
                let url = '/my/addMng';
                if(!this.mngForm.isCreate){
                    url = '/my/modifyMng';
                    params.append('mngId',this.mngForm.mngId);
                }else{
                    params.append('password',this.mngForm.password);
                }
                params.append('communityId',this.mngForm.communityId);
                params.append("phoneNum",this.mngForm.phoneNum);
                params.append('realName',this.mngForm.realName);
                axios({
                    method: 'post',
                    url: url,
                    data: params,
                    headers: {
                        'Content-type': 'application/x-www-form-urlencoded'
                    }
                })
                .then(res=>{
                    if(res.data.code==0){
                        if(this.mngForm.isCreate){
                            msg = '创建成功!';
                        }else{
                            msg = '修改成功!';
                        }
                        this.$message({
                            type: 'success',
                            message: msg
                        });
                        this.getMngTableData();
                        this.getTableData();
                        this.mngForm.dialog = false;
                    }else{
                         this.$message({
                             type: 'error',
                             message: res.data.msg
                         });
                     }
                     this.mngForm.submitDisabled = false;
                })
                .catch(err=>{
                    this.mngForm.submitDisabled = false;
                });
            });
        },

        resetMngPass(row){

            if(this.$refs['mngPassForm']){
                this.$refs['mngPassForm'].resetFields();
            }

            this.mngPassForm.password = '';
            this.mngPassForm.rePass = '';
            this.mngPassForm.mngId = row.mngId;
            this.mngPassForm.dialog = true;
        },

        submitPass(){
            this.$refs['mngPassForm'].validate(valid=>{
                if(!valid){
                    return;
                }
                this.mngPassForm.submitDisabled = true;
                let params = new URLSearchParams();
                params.append('mngId',this.mngPassForm.mngId);
                params.append('password',this.mngPassForm.password);
                let url = '/my/resetPass';
                axios({
                    method: 'post',
                    url: url,
                    data: params,
                    headers: {
                        'Content-type': 'application/x-www-form-urlencoded'
                    }
                })
                .then(res=>{
                    if(res.data.code==0){
                        this.$message({
                            type: 'success',
                            message: '重置成功!'
                        });
                        this.mngPassForm.dialog = false;
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        });
                    }
                    this.mngPassForm.submitDisabled = false;
                })
                .catch(err=>{
                    this.mngPassForm.submitDisabled = false;
                })
            });
        },

        disableMng(mngId){
            this.$confirm('是否禁用?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(()=>{
                let params = new URLSearchParams();
                params.append('mngId',mngId);
                params.append('usable',0);
                let url = '/my/usableMng';
                return axios({
                    method: 'post',
                    url: url,
                    data: params,
                    headers: {
                        'Content-type': 'application/x-www-form-urlencoded'
                    }
                });
            })
            .then(res=>{
                if(res.data.code==0){
                    this.$message({
                        type: 'success',
                        message: '禁用成功!'
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: res.data.msg
                    });
                }
                this.getMngTableData();
            })
            .catch(err=>{

            });
        },

        usableMng(mngId){
            this.$confirm('是否启用?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(()=>{
                let params = new URLSearchParams();
                params.append('mngId',mngId);
                params.append('usable',1);
                let url = '/my/usableMng';
                return axios({
                    method: 'post',
                    url: url,
                    data: params,
                    headers: {
                        'Content-type': 'application/x-www-form-urlencoded'
                    }
                });
            })
            .then(res=>{
                if(res.data.code==0){
                    this.$message({
                        type: 'success',
                        message: '启用成功!'
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: res.data.msg
                    });
                }
                this.getMngTableData();
            })
            .catch(err=>{

            });
        },

        deleteMng(mngId){
            this.$confirm('是否删除?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(()=>{
                let params = new URLSearchParams();
                params.append('mngId',mngId);
                params.append('isDelete',1);
                let url = '/my/deleteMng';
                return axios({
                    method: 'post',
                    url: url,
                    data: params,
                    headers: {
                        'Content-type': 'application/x-www-form-urlencoded'
                    }
                });
            })
            .then(res=>{
                if(res.data.code==0){
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: res.data.msg
                    });
                }
                this.getMngTableData();
            })
            .catch(err=>{

            });
        },

        resetMng(mngId){
            this.$confirm('是否恢复?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(()=>{
                let params = new URLSearchParams();
                params.append('mngId',mngId);
                params.append('isDelete',0);
                let url = '/my/deleteMng';
                return axios({
                    method: 'post',
                    url: url,
                    data: params,
                    headers: {
                        'Content-type': 'application/x-www-form-urlencoded'
                    }
                });
            })
            .then(res=>{
                if(res.data.code==0){
                    this.$message({
                        type: 'success',
                        message: '恢复成功!'
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: res.data.msg
                    });
                }
                this.getMngTableData();
            })
            .catch(err=>{

            });
        },

        toMng(row){
            this.mngTable.title = row.name+' - 小区管理员';
            this.mngTable.communityId = row.id;
            this.mngTable.dialog = true;
            this.getMngTableData();
        },

        getMngTableData(){
            this.mngTable.loading = true;
            let params = new URLSearchParams();
            let start = (this.mngTable.currentPage - 1) * this.mngTable.pageSize;
            let num = this.mngTable.pageSize;
            params.append('start', start);
            params.append('num', num);
            params.append('communityId',this.mngTable.communityId);
            let url = '/my/listMng';
            axios({
                method: 'post',
                url: url,
                data: params,
                headers: {
                    'Content-type': 'application/x-www-form-urlencoded'
                }
            })
            .then(res=>{
                this.mngTable.tableData = res.data.data.rows;
                this.mngTable.rowCount = res.data.data.total;
                this.mngTable.loading = false;
            })
            .catch(err=>{
                this.mngTable.loading = false;
            });

        },

        mngChangeHandle(value){
            this.mngTable.currentPage = value;
            this.getMngTableData();
        },

        add(){
            if(this.$refs['comForm']){
                this.$refs['comForm'].resetFields();
            }

            this.comForm.title = '新增小区';
            this.comForm.isCreate = true;
            this.comForm.name = '';
            this.comForm.regionNo = [];
            this.comForm.address = '';
            this.comForm.houseNum = '';
            this.comForm.buildAreaNum = '';
            this.comForm.exclusiveArea = '';
            this.comForm.submitDisabled = false;
            this.comForm.dialog = true;
        },

        modify(row){
            if(this.$refs['comForm']){
                this.$refs['comForm'].resetFields();
            }
            this.comForm.title = '修改小区';
            this.comForm.isCreate = false;
            this.comForm.id = row.id;
            this.comForm.name = row.name;
            this.comForm.regionNo = [row.province,row.city,row.district];
            this.comForm.address = row.address;
            this.comForm.houseNum = row.houseNum;
            this.comForm.buildAreaNum = row.buildAreaNum;
            this.comForm.exclusiveArea = row.exclusiveArea;
            this.comForm.submitDisabled = false;
            this.comForm.dialog = true;
        },

        submitComForm(){
            this.$refs['comForm'].validate(valid=>{
                if(!valid){
                    return;
                }
                this.comForm.submitDisabled = true;

                let params = new URLSearchParams();
                let url = '/my/add';
                if(!this.comForm.isCreate){
                    url = '/my/modify';
                    params.append('id', this.comForm.id);
                }
                params.append('name',this.comForm.name);
                params.append('regionNo',this.comForm.regionNo[2]);
                params.append('address',this.comForm.address);
                params.append('houseNum',this.comForm.houseNum);
                params.append('buildAreaNum',this.comForm.buildAreaNum);
                params.append('exclusiveArea',this.comForm.exclusiveArea);

                axios({
                    method: 'post',
                    url: url,
                    data: params,
                    headers: {
                        'Content-type': 'application/x-www-form-urlencoded'
                    }
                })
                .then(res=>{
                    if(res.data.code==0){
                        let msg;
                        if(this.comForm.isCreate){
                            msg = '创建成功!';
                        }else{
                            msg = '修改成功!';
                        }
                        this.$message({
                            type: 'success',
                            message: msg
                        });
                        this.getTableData();
                        this.comForm.dialog = false;
                    }else{
                        this.$message({
                            type: 'error',
                            message: res.data.msg
                        });
                    }
                    this.comForm.submitDisabled = false;
                })
                .catch(err=>{
                    this.comForm.submitDisabled = false;
                });
            });
        },



        disable(id){
            this.$confirm('是否禁用?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(()=>{
                let params = new URLSearchParams();
                params.append('id',id);
                params.append('usable',0);
                return axios({
                    method: 'post',
                    url: '/my/usable',
                    data: params,
                    headers: {
                        'Content-type': 'application/x-www-form-urlencoded'
                    }
                });
            })
            .then(res=>{
                if(res.data.code==0){
                    this.$message({
                        type: 'success',
                        message: '禁用成功!'
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: res.data.msg
                    });
                }
                this.getTableData();
            })
            .catch(err=>{

            });

        },

        usable(id){
            this.$confirm('是否启用?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
            .then(()=>{
                let params = new URLSearchParams();
                params.append('id',id);
                params.append('usable',1);
                return axios({
                    method: 'post',
                    url: '/my/usable',
                    data: params,
                    headers: {
                        'Content-type': 'application/x-www-form-urlencoded'
                    }
                });
            })
            .then(res=>{
                if(res.data.code==0){
                    this.$message({
                        type: 'success',
                        message: '启用成功!'
                    });
                }else{
                    this.$message({
                        type: 'error',
                        message: res.data.msg
                    });
                }
                this.getTableData();
            })
            .catch(err=>{

            });

        },

        query(){
            this.table.currentPage = 1;
            this.getTableData();
        },

        getTableData(){

            let params = new URLSearchParams();
            let start = (this.table.currentPage - 1) * this.table.pageSize;
            let num = this.table.pageSize;
            params.append('start', start);
            params.append('num', num);
            if(this.table.usable != null){
                params.append('usable', this.table.usable);
            }
            if(this.table.mng != null){
                params.append('mng', this.table.mng);
            }
            let name = this.table.name;
            params.append('name',name);

            let arr = this.table.regionNo;
            let regionNo;
            if(arr==null || arr.length==0){

            }else if(arr.length==3){
                regionNo = arr[2];
                params.append('regionNo', regionNo);
            }else if(arr.length==2){
                regionNo = arr[1].substring(0,4);
                params.append('regionNo', regionNo);
            }else if(arr.length==1){
                regionNo = arr[0].substring(0,2);
                params.append('regionNo', regionNo);
            }

            if(this.table.time!=null && this.table.time.length>0){
                let startTime = this.table.time[0];
                let endTime = this.table.time[1];
                params.append('startTime', startTime);
                params.append('endTime', endTime);
            }

            this.table.loading = true;
            axios({
                method: 'post',
                url: '/my/list',
                data: params,
                headers: {
                    'Content-type': 'application/x-www-form-urlencoded'
                }
            })
            .then(res=>{
                this.table.tableData = res.data.data.rows;
                this.table.rowCount = res.data.data.total;
                this.table.loading = false;
            })
            .catch(err=>{
                this.table.loading = false;
            });


        },

        //分页条
        currentChangeHandle(value) {
            this.table.currentPage = value;
            this.getTableData();
        },

        //加载地区列表
        fetchTree(){
            axios({
                method: 'post',
                url: '/my/regions',
                headers: {
                    'Content-type': 'application/x-www-form-urlencoded'
                }
            })
            .then(res=>{
                let tdata = this.createTree(res.data.data, res.data.data[0].pno);
                this.regionList = tdata;
                this.comForm.regionList = tdata;
            });
        },
        //生成树结构
        createTree(data, pno) {
            let list = [];
            data.map(item => {
                if (item.pno == pno) {
                    if(item.level<3){
                        item.children = this.createTree(data, item.no);
                    }
                    list.push(item);
                }
            });
            return list;
        },

    },
    mounted() {
        this.getTableData()
        this.fetchTree();
    }
}

let Bone = Vue.extend(Main);
new Bone().$mount('#app');